<template>
  <div>
    <baseContainer title="基本用法">
    <x-transfer :data="transferData" v-model="rightValue"></x-transfer>
  </baseContainer>
  <baseContainer title="可搜索过滤">
    <x-transfer :data="data" v-model="value" filterable filter-placeholder="State Abbreviations"></x-transfer>
  </baseContainer>
  <baseContainer title="自定义">
    可以使用 titles、button-texts、render-content 属性分别对列表标题文案、按钮文案、数据项的渲染函数行自定义。 数据项的渲染还可以使用 scoped-slot 进行自定义。 对于列表底部的内容区，提供了两个具名 slot：leftFooter 和 rightFooter。 此外，如果希望某些数据项在初始化时就被勾选，可以使用 left-default-checked 和 right-default-checked 属性。
    <br><br>
    <x-transfer 
    :data="data" 
    v-model="value" 
    filterable 
    filter-placeholder="State Abbreviations" 
    :titles="['Source', 'Target']"
    :button-texts="['To left', 'To right']"
    :left-default-checked="[2, 3]"
    :right-default-checked="[1]"
    >
  <template #default="row">
  {{ row.item.key }} - {{ row.item.label }}
  </template>
  <template #leftFooter>
    <x-button size="small">Operation</x-button>
  </template>
  <template #rightFooter>
    <x-button size="small">Operation</x-button>
  </template>
  </x-transfer>
  render-content功能待完善
  </baseContainer>
  <baseContainer title="数据项属性别名">
    <x-transfer :data="data" v-model="value" :props="transferProps"></x-transfer>
  </baseContainer>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'
import baseContainer from './baseContainer.vue'
export default defineComponent({
  components: {
    baseContainer
  },
  setup () {
    const generateData = () => { 
      const data = []
    for (let i = 0; i < 15; i++) { 
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i%4==0,
      })
    }
    return ref(data)  // 响应式数据
    }

    interface Option {
  key: number
  label: string
  initial: string
    }


const generateData2 = () => {
  const data: Option[] = []
  const states = [
    'California',
    'Illinois',
    'Maryland',
    'Texas',
    'Florida',
    'Colorado',
    'Connecticut ',
  ]
  const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
  states.forEach((city, index) => {
    data.push({
      label: city,
      key: index,
      initial: initials[index],
    })
  })
  return data
}

const data = ref<Option[]>(generateData2())
const value = ref([1])

const filterMethod = (query, item) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}

    return {
      transferData: generateData(),
      rightValue: ref([1, 4]),
      transferProps: {
        key: 'key',
        label: 'label',
        disabled: 'disabled'
      },
      data,
      value
    }
  }
})
</script>

<style scoped>

</style>